<template>
	<view>
		<create v-if="PageCur=='create'"></create>
		<enroll v-if="PageCur=='enroll'" :activityList="activityList"></enroll>
		<center v-if="PageCur=='center'"></center>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="create">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/basics' + [PageCur=='create'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='create'?'text-green':'text-gray'">创建报名</view>
			</view>
			<view class="action" @click="NavChange" data-cur="enroll">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/component' + [PageCur == 'enroll'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='enroll'?'text-green':'text-gray'">我的报名</view>
			</view>
			<view class="action" @click="NavChange" data-cur="center">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/about' + [PageCur == 'center'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='center'?'text-green':'text-gray'">个人中心</view>
			</view>
		</view>
		<view class="cu-modal" :class="!!!hasLogin?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">登录信息</view>
				</view>
				<view class="padding">
					<view class="text-gray">
						您好 游客。
					</view>
					<view class="margin-top text-gray">
						<view>这是报名工具示例App首页。</view>
						<view>点击去登录，开始旅程！</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-green margin-left" @tap="hideModal">去登录</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {baseUrl} from '@/config/index';
	
	export default {
		data() {
			return {
				PageCur: 'create',
				hasLogin: false,
				activityList: []
			}
		},
		computed: mapState(['forcedLogin', 'userName']),
		onLoad() {
			this.hasLogin = uni.getStorageSync('LOGIN_KEY')
		},
		onShow() {
			// 获取报名列表
			const ActivityList = ()=> {
				uni.request({
					url: `${baseUrl}/activity/list`,
					method: 'get',
					success: res => {
						const data = res.data.data
						this.activityList = data
					},
					fail: () => {
						alert('请求超时')
						return
					},
					complete: () => {}
				});
			}
			ActivityList()
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			hideModal() {
				if (this.forcedLogin) {
				    uni.reLaunch({
				        url: '../login/login'
				    });
				} else {
				    uni.navigateTo({
				        url: '../login/login'
				    });
				}
			}
		}
	}
</script>

<style>

</style>
